<!--
 * @Author: HeAo
 * @Date: 2021-10-22 15:20:01
 * @LastEditTime: 2021-10-25 16:30:55
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \ej-webui\src\components\OrderPane\index.vue
 * 别乱动！
-->
<template>
  <div class="orderPane">
    <el-table :data="resData.list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="id" label="订单编号"></el-table-column>
      <el-table-column label="下单时间">
        <template v-slot="scope">
          {{ scope.row.orderTime | fmtDateTime }}
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总价"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column
        prop="customer.username"
        label="顾客昵称"
      ></el-table-column>
      <el-table-column label="员工姓名">
        <template v-slot="scope">
          <el-tag v-if="scope.row.emmploy" type="success">{{
            scope.row.emmploy.realname
          }}</el-tag>
          <el-tag v-else type="info">暂未接单</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="text" @click="toDetailsHandler(row.id)"
            >详情</el-button
          >
          <span
            style="padding: 0 10px"
            v-if="
              row.status == '待支付' ||
              row.status == '待派单' ||
              row.status == '待接单'
            "
          >
            <el-button
              type="text"
              v-if="row.status == '待派单'"
              @click="sendOrderHandler(row.id)"
              >派单</el-button
            >
            <el-button
              v-else-if="row.status == '待接单'"
              type="text"
              @click="cancleOrderHandler(row.id)"
              >取消派单</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="resData.page"
      :page-sizes="[7, 10, 15, 20]"
      :page-size="resData.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="resData.total"
    >
    </el-pagination>
    <!-- 模态框区域 -->
    <el-dialog title="派单" :visible.sync="visible">
      <el-radio-group v-model="waiterId">
        <el-radio
          v-for="(item, index) in usersData.list"
          :key="index"
          :label="item.id"
          border
          >{{ item.realname }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toConfirmHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";
import { mapState, mapActions } from "vuex";
export default {
  props: {
    status: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      resData: {},
      queryPrams: {
        page: 1,
        pageSize: 10,
        status: this.status,
      },
      visible: false,
      formLabelWidth: "80px",
      waiterId: null,
    };
  },
  computed: {
    ...mapState("users", ["usersData"]),
  },
  watch: {
    status(newVal, oldVal) {
      this.queryPrams.status = newVal;
      this.pageQueryOrders();
    },
  },
  methods: {
    ...mapActions("users", ["pageQueryUsers"]),
    // 分页查询并检索订单
    pageQueryOrders() {
      request
        .get("/order/pageQuery", {
          params: this.queryPrams,
        })
        .then((res) => {
          this.resData = res.data;
        });
    },
    // pageSize-change事件
    handleSizeChange(pageSize) {
      this.queryPrams.pageSize = pageSize;
      this.pageQueryOrders();
    },
    // current-page-change事件
    handleCurrentChange(page) {
      this.queryPrams.page = page;
      this.pageQueryOrders();
    },
    // 派单按钮点击事件
    sendOrderHandler(orderId) {
      this.pageQueryUsers({
        page: 1,
        pageSize: 100,
        roleId: 1,
      }); // 查询所有的员工
      this.visible = true; // 打开派单模态框
      this.orderId = orderId;
    },
    // 派单模态框确认按钮点击事件
    toConfirmHandler() {
      if (this.waiterId) {
        request
          .get("/order/sendOrder", {
            params: {
              waiterId: this.waiterId,
              orderId: this.orderId,
            },
          })
          .then((res) => {
            this.pageQueryOrders(); // 重载订单数据
            this.visible = false; // 关闭模态框
            this.$message.success(res.message); // 提示成功
          });
      } else {
        this.$message.warning("请先选择员工");
      }
    },
    // 取消派单按钮点击事件
    cancleOrderHandler(orderId) {
      this.$confirm("此操作将取消派单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        request
          .get("/order/cancelSendOrder", {
            params: {
              orderId,
            },
          })
          .then((res) => {
            this.pageQueryOrders(); // 重载数据
            this.$message.success(res.message);
          });
      });
    },
    // 详情按钮点击事件
    toDetailsHandler(id) {
      this.$router.push({
        path: "details",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.pageQueryOrders(); // 分页检索订单
  },
};
</script>
